/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form,  Input ,InputNumber,Radio,TreeSelect,Select,DatePicker,Button,Upload,Icon ,Cascader} from 'antd';
import {connect} from 'dva';
import {download} from '@/utils/utils';
import request from '@/utils/request';
import config from '@/config/config'
const FormItem = Form.Item;
const Option = Select.Option;
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      concentrators:[]
    };
  }
  componentDidMount() {
    this.props.findChildFunc(this.getState);
  }
  getState=()=>{
    return this.state.fileList
  }
  downloadTemplates=()=>{
    download(`${config.prefix}/templates?type=meter&language=${sessionStorage.getItem('locale') === 'en'?'en':'zh-CN'}`)
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
    };
    const {getFieldDecorator, getFieldValue} = this.props.form;
    return (
      <div>
      <Form onSubmit={this.handleSubmit}>
        <FormItem
          label= '导出模板下载'
          {...formItemLayoutWithLabel}
        >
          <Button type="primary" onClick={this.downloadTemplates}> 下载模板</Button>
        </FormItem>
        <FormItem
          label={'温度介质类型'}
          {...formItemLayoutWithLabel}
        >
          {getFieldDecorator('meter_number_length', {
            initialValue: '14',
            rules: [{required: true, message: '水表号长度'}],
          })(
            <Select >
              <Option  value="14">冷水表</Option>
              <Option  value="12">热水表</Option>
            </Select>
          )}
        </FormItem>
        <FormItem
          label={'水表口径'}
          {...formItemLayoutWithLabel}
        >
          {getFieldDecorator('meter_number_length', {
            initialValue: 'DN100',
            rules: [{required: true, message: '水表号长度'}],
          })(
            <Select >
              <Option  value="14">DN100</Option>
              <Option  value="12">DN150</Option>
            </Select>
          )}
        </FormItem>
        <FormItem
          label={'水表厂家'}
          {...formItemLayoutWithLabel}
        >
          {getFieldDecorator('meter_number_length', {
            initialValue: 'DN100',
            rules: [{required: true, message: '水表号长度'}],
          })(
            <Select >
              <Option  value="14">DN100</Option>
              <Option  value="12">DN150</Option>
            </Select>
          )}
        </FormItem>
        <FormItem
          {...formItemLayoutWithLabel}
          label={'EXCEL文件'}
        >
          <div className="dropbox">
            {getFieldDecorator('file', {
              rules: [{required: true, message: 'Excel文件不能为空'}],
            })(
              <Upload.Dragger {...props}>
                <p className="ant-upload-drag-icon">
                  <Icon type="inbox" />
                </p>
                <p className="ant-upload-text">点击这个区域选择EXCEL文件</p>
              </Upload.Dragger>
            )}
          </div>
        </FormItem>
      </Form>
    </div>
    );
  }
}

const EditUserArchivesFormWrap = Form.create()(EditUserArchives);
export default connect()(EditUserArchivesFormWrap);
